<template>
    <div class="trigger-webhook">
        <div class="title">{{ $t('trigger.text4') }}</div>
        <p class="trigger-tip">{{ $t('trigger.text5') }}</p>
        <div class="url-input">
            <el-tooltip effect="dark" :content="options.url">
                <el-input v-model="options.url" disabled></el-input>
            </el-tooltip>
            <el-button type="primary" @click="copyLink(options.url)">
                {{ $t('common.base.copy') }}
            </el-button>
        </div>
        <div class="title">{{ $t('trigger.text6') }}</div>
        <div class="webhook-config-param-template">
            <el-input 
                v-model="options.paramTemplate" 
                type="textarea" 
                :autosize="{ minRows: 3, maxRows: 10 }"
                disabled 
            />
            <el-button type="primary" @click="copyLink(options.paramTemplate)">
                {{ $t('common.base.copy') }}
            </el-button>
        </div>
    </div>
</template>

<script>
import state from '@src/modules/trigger/view/setting/util/state.js'
import { isObject } from '@src/util/type'

export default {
    name: 'Webhook',
    props: {
        value: Object,
        options: {
            type: Object,
            default: () => {}
        }
    },
    data() {
        return {
            webHookConfig: {
                url: '',
                paramTemplate: '',
            },
        };
    },
    created() {
        if (!state.executeWay.options?.url) {
            this.$set(state.executeWay, 'options', {
                url: this.options.url,
                paramTemplate: this.options.paramTemplate,
            })
        }
    },
    methods: {
        copyLink(data) {
            if (isObject(data)) {
                data = JSON.stringify(data, null, 2);
            }
            let input = document.createElement('input')
            input.value = data
            input.setAttribute('style', 'position:fixed;top:-100%')
            document.body.appendChild(input)
            input.select()
            document.execCommand('copy')
            input.remove()
            this.$message.success(this.$t('common.base.tip.copySuccess'));
        },
    }
};
</script>

<style lang="scss" scoped>
.trigger-webhook {
    .title {
        font-size: 14px;
        font-weight: 500;
        margin: 8px 0;
    }

    .trigger-tip {
        font-size: 12px;
        margin-bottom: 8px;
    }

    .url-input {
        display: flex;

        .el-button {
            margin-left: 12px;
        }
    }

    .webhook-config-param-template {
        display: flex;
        justify-content: center;

        ::v-deep .el-textarea__inner {
            background-color: #F5F5F5 !important;
            color: #C0C4CC !important;
        }

        .el-button {
            height: 32px;
            margin-left: 12px;
        }
    }
}
</style>